<template>
  <div class="login">
      <!-- 导航栏 -->
      <van-nav-bar
  title="登录"
  left-text="返回"
  left-arrow
  @click-left="$router.go(-1)"
/>
<!-- 表单 -->
<van-form @submit="onSubmit">
  <van-field
  required
    v-model="mobile"
    name="mobile"
    label="手机号"
    type="tel"
    placeholder="请输入手机号"
    :rules="[
          { required: true, message: '请填写手机号' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式不对'
          }
        ]"
  />
  <van-field
  required
    v-model="code"
    name="code"
    label="验证码"
    placeholder="请输入验证码"
    :rules="[
          { required: true, message: '验证码没有写哦!' },
          { pattern: /\d{6}/, message: '验证码格式不对' }
        ]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit"
    :disable='isloading' :loading='isloading' loading-type="spinner" loading-text='登录中'>提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import {getLoginApi} from '@/API/login'
import {saveToken} from '@/utils/token'
export default {
name:'login',
data(){
    return{
      isloading:false,
       mobile:'13912345678',
       code:'246810'
    }
},
methods:{
    async onSubmit(values){
      this.isloading=true
    const res=await getLoginApi(values)
    // console.log(res);
    this.isloading=false
    this.$router.push({path:'/'})
    this.$toast.success('成功登录')
    saveToken(res.data.data)
    }
}
}
</script>

<style lang='less'>
.login{
    .van-nav-bar__content{
        background-color: rgb(10, 136, 253);
        .van-nav-bar__title{
            color: #fff;
        }
        .van-nav-bar__left{
            .van-nav-bar__text{
            color: #fff;
            }
            .van-icon{
                color: #fff;
            } 
        }
    }
}
</style>